<template>
  <div class="info-pos">
    <div class="card" style="width: 80rem; margin-top: 15px " v-for="item in OrderList">
      <div class="card-body">
        <h4 style="display: inline-block">{{item.shopName}}</h4>
        <h6 style="display: inline-block">{{item.historyOrder.paytime}}</h6>
        <div>订单号：{{item.historyOrder.historyOrderNumber}}</div>
        <div>总价：{{item.historyOrder.wholePrice}}</div>
        <div>地址：{{item.historyOrder.allAddress}}</div>
        <div>完成时间：{{item.historyOrder.finishTime}}</div>
        <div>对店铺评分：{{item.historyOrder.merchantOrderGrade}}</div>
        <div><select class="form-control" id="exampleFormControlSelect1" v-model="item.historyOrder.merchantOrderGrade">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
          <button type="button" class="btn btn-primary" @click.prevent="markMerchant(item)">提交对商家评分</button></div>
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">dishName</th>
            <th scope="col">dishPrice</th>
            <th scope="col">dishNum</th>
            <th scope="col">orderDishGrade</th>
            <th scope="col">###############</th>

          </tr>
          </thead>
          <tbody>
          <tr v-for="(dish, index) in item.historyOrderList" :key="dish.dishNumber">

            <th scope="row">{{++index}}</th>
            <td>{{dish.dishName}}</td>
            <td>{{dish.dishPrice}}</td>
            <td>{{dish.wholeNum}}</td>
            <td><select class="form-control" id="exampleFormControlSelect1" v-model="dish.orderDishGrade">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
            </select>
            </td>
            <td><button type="button" class="btn btn-primary" @click.prevent="markDish(dish)">提交对菜品评分</button></td>



          </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div class="footer-pos"></div>
  </div>
</template>
<script>
export default {
  name: 'HistoryOrder',
  data(){
    return{
      OrderList:[]
    }

  },

  methods:{
    async getOrderList() {
      const {data: res} = await this.$http.get('/historyOrder/getHistoryList?customerPhoneNumber='+localStorage.getItem("username_C"))
      this.OrderList=res.data
    },

    async markMerchant(item) {
      if (item.historyOrder.merchantOrderGrade == null)
      {
        alert("未选择评分")
      }else {
        const {data: res} = await this.$http.get('/historyOrder/markMerchant?historyOrderNumber='+item.historyOrder.historyOrderNumber
            +'&merchantOrderGrade='+item.historyOrder.merchantOrderGrade)
        if(res.data===0){
          alert('已经评过分了，无法再评分')
        }
      }
      await this.getOrderList();
    },

    async markDish(dish){
      if(dish.orderDishGrade == null)
      {
        alert("未选择评分")
      }else{
        const {data: res} = await this.$http.get('/historyOrder/markDish?historyOrderNumber='+dish.historyOrderNumber
          +'&orderDishGrade='+dish.orderDishGrade+'&dishNumber='+dish.dishNumber)
        if(res.data===0){
          alert('已经评过分了，无法再评分')
        }
      }
      await this.getOrderList();
    }


  },

  created() {
    this.getOrderList();
  }


}
</script>

<style lang="less" scoped>
.info-pos{
  margin: 0 auto;
  width: 80rem;
  height: 200px;

}
</style>
